<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

      body,
      html {
        height: 100%;
        display: grid;
      }

      body {
        font-family: Lato, sans-serif;
        background: #f9a825;
        transition: background 0.25s linear;
      }

      h1 {
        margin: 0;
      }

      #container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: auto;
      }

      .ghost {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 200px;
        width: 200px;
        transition: transform 0.25s ease, background 0.25s linear,
          opacity 1.25s ease-in;
      }

      .appear {
        background: url("https://static.vecteezy.com/system/resources/previews/001/204/824/non_2x/ghost-png.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .cancel-btn {
        font-size: 1rem;
        border: none;
        border-radius: 10px;
        font-family: Lato, sans-serif;
        color: white;
        background: red;
        text-transform: uppercase;
        padding: 1em;
        cursor: pointer;
        margin-bottom: 1.5em;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>今晚去我家 !</h1>
      <h2>如果你想拒绝的话下面是你最后的机会</h2>
      <div class="ghost">
        <button class="cancel-btn" type="button">拒绝?</button>
      </div>
    </div>
  </body>
  <script>
    let cancelButton = document.querySelector(".cancel-btn");
    let ghost = document.querySelector(".ghost");
    let pityCount = 0;

    let words = [
      "不错的尝试",
      "哎哟，太近了!",
      "想我了!",
      "你再试试",
      "太慢了!",
      "放弃了吗?",
      "从了我!",
    ];

    function runAway(e) {
      ghost.classList.add("appear");
      document.body.style = `background: #212121;
                color: red;`;
      event.stopPropagation();
      pityCount += 1;

      if (pityCount < 20) {
        cancelButton.innerText = words[Math.floor(Math.random() * 6)];
        ghost.style = `transform: translate(${Math.random() * 80 - 40}vw, ${
          Math.random() * 80 - 40
        }vh);`;
      } else {
        cancelButton.innerText = "Okay 好吧! 拒绝... 除非你能 hehe";
        ghost.style = "opacity: 0;";
      }
    }

    cancelButton.addEventListener("mouseover", (e) => runAway(e));
  </script>
</html>
